import { Button, Card } from "antd";
import React from "react";
import { BrowserRouter, Route, Link, NavLink, Switch } from "react-router-dom";
import AboutPanel from "./panel/about";
import HomePanel from "./panel/home";
import UserPanel from "./panel/user";

const RouterTab: React.FC = () => {

    return (
        <BrowserRouter>
            <Card title="RouterTab" bordered style={{width: 400, margin: 'auto'}}>
                <div style={{display: 'flex', justifyContent: 'start', flexDirection: 'row'}}>
                    <Button type="link">
                        <NavLink to="/home" activeStyle={{color: 'red'}}>Home</NavLink>
                    </Button>
                    <Button type="link">
                        <NavLink to="/user" activeStyle={{color: 'red'}}>User</NavLink>
                    </Button>
                    <Link to="/about">
                        <Button type="link">About</Button>
                    </Link>
                </div>
                <hr/>
                <div style={{marginTop: 20, width: '100%', height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                    {/* Switch可以截断匹配，提高效率 */}
                    <Switch>
                        <Route path="/home" component={HomePanel}/>
                        <Route path="/home" component={() => (<div>Append Content</div>)}/>
                        <Route path="/user" component={UserPanel}/>
                        <Route path="/about" component={AboutPanel}/>
                    </Switch>
                </div>
            </Card>
        </BrowserRouter>
    )
}

export default RouterTab;